<template>
  <div class="randomBackground" :style="randomBackground">
    <!-- lottie动画 -->
    <div>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions" :height="200" :width="200" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions1" :height="240" :width="240" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions2" :height="200" :width="200" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions3" :height="200" :width="200" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions4" :height="200" :width="200" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions5" :height="200" :width="200" />
      </span>
      <span style="display: inline-block">
        <lottieAnim :options="defaultOptions6" :height="200" :width="200" />
      </span>
    </div>欢迎页面
    <div>
      <el-button @click="goScreen">按钮点击</el-button>
    </div>
    <span class="sq ys">申请</span>
    <span class="xz ys">选择</span>
    <span class="oa ys">oa</span>
    <span class="rwfp">任务分配</span>
    <span class="ypjsqr">样品接收确认</span>
    <span class="syjh">试验计划</span>
    <span class="lck">流程卡</span>
    <span class="bg">报告</span>
    <span class="cs">测试</span>

    <!-- <div style="margin-top: 20px">
      <el-button type="primary" @click="loadingShow">打开loading</el-button>
    </div>-->

    <div>
      <div class="text">文字</div>
      <button @click="defaultTheme">默认</button>
      <button @click="dark">黑色</button>
    </div>
    <div>
      <el-button type="primary" @click="showDriver">操作引导</el-button>
      <el-button type="primary" @click="loadingShow">loading</el-button>
    </div>
    <div style="color:red;text-align:center">
      {{$t('navBar.user')}}
      <br />
      {{$t('navBar.css')}}
    </div>
    <div>
      {{list}}
      <li v-for="item in list">
        <el-checkbox v-model="item.checked">{{item.name}}</el-checkbox>
      </li>
    </div>
  </div>
</template>

<script>
// 操作演示插件
import Driver from "driver.js";
import "driver.js/dist/driver.min.css";

import lottieAnim from "@/components/lottie/index";
import * as lottieJson from "../assets/lottieJson/129188-planning-poker-pup.json"; //lottie动画json
import * as lottieJson1 from "../assets/lottieJson/128833-footballer.json"; //lottie动画json
import * as lottieJson2 from "../assets/lottieJson/128334-music-man.json"; //lottie动画json
import * as lottieJson3 from "../assets/lottieJson/129020-wizzard-sushi.json"; //lottie动画json
import * as lottieJson4 from "../assets/lottieJson/127848-happy-spaceman.json"; //lottie动画json
import * as lottieJson5 from "../assets/lottieJson/129634-firing-and-smiling-gold-coin.json"; //lottie动画json
import * as lottieJson6 from "../assets/lottieJson/91651-hamster-loader.json"; //lottie动画json
import { mapMutations } from "vuex";

export default {
  components: { lottieAnim },
  mounted() {
    // this.showDriver();
    // this.loadingShow();
    this.init();
  },
  data() {
    return {
      list: [
        { name: "项目1", checked: false },
        { name: "项目2", checked: false },
        { name: "项目3", checked: false },
        { name: "项目4", checked: false }
      ],
      //lottie配置
      defaultOptions: {
        animationData: lottieJson.default /*文件资源*/
      },
      defaultOptions1: {
        animationData: lottieJson1.default /*文件资源*/
      },
      defaultOptions2: {
        animationData: lottieJson2.default /*文件资源*/
      },
      defaultOptions3: {
        animationData: lottieJson3.default /*文件资源*/
      },
      defaultOptions4: {
        animationData: lottieJson4.default /*文件资源*/
      },
      defaultOptions5: {
        animationData: lottieJson5.default /*文件资源*/
      },
      defaultOptions6: {
        animationData: lottieJson6.default /*文件资源*/
      }
    };
  },
  computed: {
    //刷新界面，随机替换背景图片
    randomBackground() {
      // 计算body的可用高度
      let cHeight =
        window.outerHeight - (window.outerHeight - window.innerHeight);
      // 存放要更换的图片
      let imgs = [
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pcauto.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fautohm%2F2202%2F18%2Fc36%2F298029185_1645174561361_830x600.jpg&refer=http%3A%2F%2Fimg.pcauto.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417006&t=2d445766214861d9589f1957cab913d8",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2F7a%2F4e%2F84%2F7a4e84857a78870c19c639ef2b71078d.jpg&refer=http%3A%2F%2Fup.enterdesk.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=af1aeeaeaf4b173d1f5fefc4a205ce8a",
        "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fd9176c4b44688066bc9bf40a2e8306202711f1cb3f17c-0gVSWg_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665417776&t=c80a2ab57753cbb02382236ee4939f52"
      ];
      let imgName = imgs[Math.floor(Math.random() * 3)]; //进行计算随机
      console.log(imgName);
      let style =
        "background-image:url('" +
        imgName +
        "'); background-repeat: round; height:" +
        cHeight +
        "px;";
      return style;
    }
  },
  methods: {
    showDriver() {
      const steps = [
        {
          element: document.querySelector(".sq"), //获取元素节点
          popover: {
            title: "可靠性申请",
            description: "申请操作",
            position: "bottom-center" //提示框的位置
          }
        },
        {
          element: document.querySelector(".xz"),
          popover: {
            title: "可靠性试验选择",
            description: "试验选择",
            position: "bottom-center"
          }
        },

        {
          element: document.querySelector(".oa"),
          popover: {
            title: "可靠性试验",
            description: "oa返回",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".rwfp"),
          popover: {
            title: "任务分配",
            description: "分配",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".ypjsqr"),
          popover: {
            title: "样品接收确认",
            description: "接收样品",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".syjh"),
          popover: {
            title: "试验计划",
            description: "项目计划",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".lck"),
          popover: {
            title: "流程卡",
            description: "填写记录",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".bg"),
          popover: {
            title: "报告",
            description: "报告编辑->审核->生成下载",
            position: "bottom-center"
          }
        },
        {
          element: document.querySelector(".cs"),
          popover: {
            title: "测试一下",
            description: "右侧",
            position: "right-center"
          }
        }
      ];
      const driver = new Driver({
        //初始化引导页
        doneBtnText: "知道了", // 结束按钮的文字
        allowClose: false, // 是否可以通过点击遮罩层关闭指引
        stageBackground: "#fff", // 突出显示元素的背景颜色
        nextBtnText: "下一步", // 下一步按钮的文字
        prevBtnText: "上一步", // 上一步按钮的文字
        closeBtnText: "关闭", // 关闭按钮的文字
        keyboardControl: false, // 是否允许键盘操控
        xCloseButton: false // 将关闭按钮作为X放在弹出
      });
      driver.defineSteps(steps);
      driver.start();
    },
    loadingShow() {
      this.$loading.show();
      setTimeout(() => {
        this.$loading.hide();
      }, 2000);
    },
    // 将存在 vuex 中的更改主题方法拿过来
    ...mapMutations(["setThemeStore"]),

    // 主题初始化
    init() {
      console.log(localStorage.getItem("theme"));
      this.$store.commit("setThemeStore", "default");
      // this.setThemeStore(this.$store.state.theme);
    },
    // 更改为默认主题
    defaultTheme() {
      this.$store.commit("setThemeStore", "default");
      // this.setThemeStore("default");
    },
    // 更改为暗黑主题
    dark() {
      this.$store.commit("setThemeStore", "green");
      // this.setThemeStore("dark");
    },
    goScreen() {
      window.open("/#/dv4", "blank");
    }
  }
};
</script>

<style scoped lang="less">
.randomBackground {
  width: 100%;
  background-size: cover;
  background-position: center 0;
}
.ys {
  border: 1px solid #ccc;
  padding: 3px;
  text-align: center;
  margin-right: 3px;
}
.text {
  width: 100vw;
  height: 100px;
  background-color: @primaryColor;
  color: @primaryTextColor;
}
</style>
